import React from "react"
import { Layout, Menu, Avatar,Button,Dropdown } from 'antd';
import {MenuFoldOutlined } from  '@ant-design/icons'
import './index.css'
import {collapseMenu} from '../../store/reducers/tab'
import { UseDispatch, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
const { Header} = Layout;
const CommonHeader=({collapsed})=>{
  const navigate=useNavigate()
    //登出
    const role=localStorage.getItem('role')
let qq =''
if(role==='user'){
 qq = require("../../assets/images/user-default.png");
}else{
  qq=require("../../assets/images/机甲.png")
}
    const logout=()=>{
//清楚token
localStorage.removeItem('token')
navigate('./login')
    }
    const items = [
        {
          key: '1',
          label: (
            <a target="_blank" rel="noopener noreferrer" >
              修改密码
            </a>
          ),
        },
        {
          key: '2',
          label: (
            <a onClick={()=>logout()} target="_blank" rel="noopener noreferrer" >
            退出登录
            </a>
          )
        }
      ];
      //创建dispath
      const dispatch=useDispatch()
    //点击展开收起按钮 
    const setCollapsed=()=>{
console.log(collapsed);
dispatch(collapseMenu())
    }
    return(
<Header
            className="header-container"
            style={{
              padding: 0,
            }}
          >
       
            <Button
            type="text"
            icon={<MenuFoldOutlined />}
            style={{
                fontSize:'16px',
                width:64,
                height:32,
                backgroundColor:'#fff'
            }}
            onClick={()=>setCollapsed()}
            ></Button>
            <Dropdown
            menu={{items}}
            >
                <Avatar size={40} src={<img src={qq}/>}>
                    </Avatar></Dropdown>
            
          </Header>
          )
}
export default CommonHeader;